<!--
 * @Description: 环形进度表
 * @Date: 2022-09-05 16:25:59
 * @LastEditTime: 2023-06-21 19:02:22
 * @FilePath: /demo_important/src/views/Echarts/components/Schedule/Schedule.vue
 * @Author: byhzdemacbook-pro-2.local
-->
<template>
  <div>
    <h1>环形进度表</h1>
    <div
      class="charts"
      ref="myCharts"
      style="width: 400px; height: 370px"
    ></div>
    <div
      class="charts"
      ref="myChartA"
      style="width: 400px; height: 370px"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl';
import { option } from "./index"
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    console.log(option);
    this.handler()
  },
  methods: {
    handler() {
      const myCharts = echarts.init(this.$refs.myCharts);

      console.log(option);
      myCharts.setOption(option);


      const myChartA = echarts.init(this.$refs.myChartA);
      let value = 55.33;
      let title = '超期率';
      let int = value.toFixed(2).split('.')[0];
      let float = value.toFixed(2).split('.')[1];
      const options = {
        backgroundColor: '#051F54',
        title: {
          text: '{a|' + int + '}{b|.' + float + '}\n{c|' + title + '}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 48,
                color: '#29EEF3'
              },
              b: {
                fontSize: 20,
                color: '#29EEF3',
                padding: [0, 0, 14, 0]
              },
              c: {
                fontSize: 20,
                color: '#ffffff',
                padding: [5, 0]
              }
            }
          }
        },
        series: [
          {
            type: 'gauge',
            radius: '60%',
            clockwise: false,
            startAngle: '90',
            endAngle: '-269.9999',
            splitNumber: 25,
            detail: {
              offsetCenter: [0, -20],
              formatter: ' '
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [0, '#2CFAFC'],
                  [52 / 100, '#1DE2A4'],
                  [1, 'rgba(32,187,252,0.15)']
                ],
                width: 30
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 32,
              lineStyle: {
                color: '#051F54',
                width: 6
              }
            },
            axisLabel: {
              show: true
            }
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['43%', '45%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#0C355E'
              }
            },
            label: {
              show: false
            },
            data: [100]
          },
          {
            type: 'pie',
            name: '内层环',
            radius: [0, '43%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
              normal: {
                color: '#02163F'
              }
            },
            label: {
              show: false
            },
            data: [100]
          }
        ]
      };
      console.log(options);
      myChartA.setOption(options);
    },
  },
};
</script>

<style scoped lang="scss">
</style>
